<template>
  <view class="content">
    <view class="userHeader">
      <view class="userHeaderInfo">
        <view class="userHeaderInfoImg">
          <image src="/static/user/user02.png" style="width: 150rpx;height: 40rpx;" mode="widthFix" />
        </view>
        <view class="userHeaderInfoName flex flex-align" @click="goUrl('/pagesA/setting/setting',true)">
          <image class="userHeaderInfoNameImg" :src="datainfo.headimg||'/static/logo.png'"  mode="scaleToFill" />
          <view class="userHeaderInfoText flex-column flex flex-bt">
            <view class="name" v-if="userStore.token">{{datainfo.nickname}}</view>
            <view class="name" v-else>去登陆</view>
            <view class="userHeaderInfoTextNum flex flex-align">
              <view class="list" @click.stop="copyText(datainfo.id)">ID:{{datainfo.id}}</view>
              <view class="list" @click.stop="copyText(datainfo.inviter_code)">邀请码：{{datainfo.inviter_code}}</view>
            </view>
          </view>
        </view>
        <view class="userHeaderInfoEdit flex-line flex-align">

          <view @click="goUrl('/pagesA/setting/setting',true)" class="flex-line flex-align">
            <image src="/static/user/user09.png" mode="scaleToFill" />
            更新资料
          </view>
          <view @click="goUrl('/pagesA/signs/signs',true)" class="flex-line flex flex-align">
            <image src="/static/user/user03.png" mode="scaleToFill" />
            每日签到
          </view>
        </view>
        <view class="userHeaderLevel flex flex-align">
          您当前的会员级别：<view>{{datainfo.consumption_level_name}}</view>
        </view>
      </view>
      <image class="userHeaderBj" src="/static/user/user01.png" />
    </view>
    <view class="userInfoCenter">
      <view v-if="datainfo.community_pid" class="userInfoCenterItem">
        <view class="title flex flex-align"><text></text> 我的门店 </view>
        <view class="zitiInfo flex flex-align">
          <image class="zitiLogo"  :src="datainfo.community_pid.image"  mode="scaleToFill"  />
          <view class="zitiInfoText flex-column flex flex-bt flex-1">
            <view class="name">{{datainfo.community_pid.name}}</view>
            <view class="address">{{datainfo.community_pid.address_area}}{{ datainfo.community_pid.address }}</view>
            <view class="phone flex flex-align"><image src="/static/user/user10.png" style="width: 30rpx;height: 30rpx;"  mode="scaleToFill" /> {{datainfo.community_pid.phone}}</view>
          </view>
        </view>
      </view>
      <view class="userInfoCenterItem" style="background: #fff;">
        <view class="title flex flex-align"><text></text> 常用功能 </view>
        <view class="commonFun flex flex-align">
          <view v-if="type==0" @click="goUrl('/pagesA/shenqing/shenqing',true)" class="commonFunItem flex flex-column flex-align">
            <image src="/static/user/user06.png" style="width: 60rpx;height: 60rpx;"  mode="scaleToFill" />
            <view class="name">申请团长</view>
          </view>
          <view v-else @click="goUrl('/pagesA/teamcenter/teamcenter',true)" class="commonFunItem flex flex-column flex-align">
            <image src="/static/user/user06.png" style="width: 60rpx;height: 60rpx;"  mode="scaleToFill" />
            <view class="name">{{type===1?'团长中心':type===2?'合作中心':type===3?'核销中心':'招商中心'}}</view>
          </view>
          <view @click="goUrl('/pagesA/question/question',false)" class="commonFunItem flex flex-column flex-align">
            <image src="/static/user/user08.png" style="width: 60rpx;height: 60rpx;"  mode="scaleToFill" />
            <view class="name">常见问题</view>
          </view>
          <view @click="goUrl('/pagesA/feedback/feedback',false)" class="commonFunItem flex flex-column flex-align">
            <image src="/static/user/user07.png" style="width: 60rpx;height: 60rpx;"  mode="scaleToFill" />
            <view class="name">投诉</view>
          </view>
        </view>
      </view>
    </view>
    <tabBar v-if="userStore.token&&type!=0||datainfo.rank_id==5" :tabActive="1"></tabBar>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onReady } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { goUrl,copyText } from '@/utils'
import { useUserStore } from '@/store/modules/user'
const title = ref('Hello')
const calendar = ref()
const userStore = useUserStore()
const datainfo = computed(() => {
  return userStore.userInfo
})
const type = ref(0)
onReady(() => {
  uni.hideTabBar()
  if(datainfo.value.is_community==2){
      type.value = 0
    }else if(datainfo.value.is_community==1&&datainfo.value.is_agency==2){
      type.value = 1
    }else if(datainfo.value.is_community==1&&datainfo.value.is_agency==1){
      type.value = 2 
    }else if(datainfo.value.is_community==1&&datainfo.value.is_agency==4){  
      type.value = 3
    }else if(datainfo.value.is_community==1&&datainfo.value.is_agency==5){
      type.value = 4
    }
})
onLoad(() => {
  getInfo()
})
const getInfo = async () => {
  // userStore.setUserInfo()
}


</script>

<style lang="scss" scoped>

.userHeader{
  width: 100%;position: relative;z-index: 11;padding-top: 110rpx;padding-left: 30rpx;box-sizing: border-box;padding-right: 30rpx;
  height: 586rpx;
  .userHeaderBj{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;z-index: -1;
  }

}
.userInfoCenter{background: #F5F6FA;border-radius: 30rpx 30rpx 0 0 ;margin-top: -30rpx;position: relative;z-index:  111;padding:30rpx 20rpx 20rpx;
  .userInfoCenterItem{
    padding:20rpx 30rpx 30rpx;background: url('@/static/user/user05.png') no-repeat;background-size: 100% 100%;
    margin-bottom: 20rpx;
    .title{
      font-size: 32rpx;font-weight: bold;
      color: #323233;
      text{
        width: 8rpx;height: 26rpx;background: #1E4FFF;border-radius: 4rpx;margin-right: 10rpx;
      }

    }
    .zitiInfo{
      margin-top: 30rpx;
      .zitiLogo{
        width: 160rpx;height: 160rpx;border-radius: 20rpx;
      }
      .zitiInfoText{
        margin-left: 20rpx;height: 160rpx;
        .name{
          font-size: 28rpx;font-weight: bold;
          color: #323233;
        }
        .address{
          font-size: 24rpx;
          color: #767E9A;
        }
        .phone{
          font-size: 24rpx;width: 190rpx;margin-top: 10rpx;
          color: #fff;background: linear-gradient(to right, #0B8EFF, #1E4FFF);padding: 5rpx 15rpx;border-radius: 40rpx;
        }

      }

    }
    .commonFun{
      margin-top: 30rpx;
      .commonFunItem{
        width: 25%;
        image{
          width: 70rpx;height: 70rpx;
        }
        .name{
          font-size: 26rpx;
          color: #224473;
        }
      }
    }
  }

}

.userHeaderLevel{
  margin: 30rpx 0;background: url('@/static/user/user04.png') no-repeat;background-size: 100% 100%;height: 80rpx;font-size: 24rpx;color: #979DB0;
  padding: 5rpx 20rpx 20rpx;
  view{font-size: 28rpx;font-weight: bold;
    // 文字颜色渐变
    background: linear-gradient(90deg, #F8E0BF 0%, #DCA96A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

  }
}
.userHeaderInfoEdit{
   margin-top: 30rpx;padding: 20rpx;
  .flex-line{
    width: 33%;
    image{width: 50rpx;height: 50rpx;}
  }

}
.userHeaderInfoName{
  width: 100%;margin-top: 40rpx;
  height: 100%;
  .userHeaderInfoNameImg{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;margin-right: 20rpx;
  }
  .userHeaderInfoText{
    font-size: 28rpx;font-weight: bold;
    color:#323233;
    .userHeaderInfoTextNum{
      font-size: 24rpx;
      color: #333;
      .list{
        margin-right: 20rpx;margin-top: 10rpx;
        background: rgba(255,255,255,0.5);padding: 5rpx 20rpx;border-radius: 20rpx;font-weight: 400;
      }
    }

  }

}


</style>
